<template>
	<view class="container">
		<view class="intro">
			<image src="/static/images/logo.png"></image>
			<view class="tips">
				申请获取以下权限
				<br>
				获得你的公开信息（昵称、头像等）
			</view>
		</view>
		<view class="bottom">
			<!-- #ifdef H5 -->
				<button type="primary" size="default" class="login-btn" @tap="login">
					登录
				</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
				<button type="primary" size="default" class="login-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="wxGetUserInfo">
					<image src="/static/images/mine/wechat.png"></image>
					微信一键登录
				</button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
				<button @getAuthorize="onGetAuthorize" scope="userInfo" open-type="getAuthorize" type="primary" size="default" class="login-btn">
					支付宝一键登录
				</button>
			<!-- #endif -->
			<view class="no-login-btn">
				<button class="btn-normal" @click="onNotLogin">暂不登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			onGetAuthorize(res) {
				console.log('开始授权')
				let self = this;
				uni.login({
					provider: 'alipay',
					success: function(loginRes) {
						console.log("sucss")
						console.log(loginRes)
						uni.getUserInfo({
							provider: 'alipay',
							success: function(infoRes) {
								self.aliPayLogin(loginRes,infoRes);
							}
						});
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			aliPayLogin(loginRes,infoRes){
				let self = this;
				console.log(loginRes); // 获取用户信息 
				console.log(infoRes);
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				self._post('user.useralipay/login', {
					code: loginRes.authCode,
					avatar: infoRes.avatar,
					nickName: infoRes.nickName
				}, result => {
					// 记录token user_id
					uni.setStorageSync('token', result.data.token);
					uni.setStorageSync('user_id', result.data.user_id);
					// 执行回调函数
					uni.navigateBack();
				}, false, () => {
					uni.hideLoading();
				});
			},
			onNotLogin(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			wxGetUserInfo: function(e) {
				let self = this;
				if (e.detail.errMsg !== 'getUserInfo:ok') {
					return false;
				}
				uni.showLoading({
					title: "正在登录",
					mask: true
				});
				// 执行微信登录
				wx.login({
					success(res) {
						// 发送用户信息
						self._post('user.user/login', {
							code: res.code,
							user_info: e.detail.rawData,
							encrypted_data: encodeURIComponent(e.detail.encryptedData),
							iv: encodeURIComponent(e.detail.iv),
							signature: e.detail.signature,
							referee_id: uni.getStorageSync('referee_id'),
							source: 'wx'
						}, result => {
							// 记录token user_id
							uni.setStorageSync('token', result.data.token);
							uni.setStorageSync('user_id', result.data.user_id);
							uni.hideLoading()
							// 执行回调函数
							uni.navigateBack();
						}, false, () => {
							uni.hideLoading();
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.intro {
		width: 100%;
		height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		font-size: $font-size-base;
		color: $text-color-assist;
		
		image {
			width: 165rpx;
			height: 165rpx;
		}
		
		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}
	
	.bottom {
		height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;
		
		.login-btn {
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			
			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
		
		.row {
			.grid {
				width: 20%;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.btn-normal{
		background-color: #F1F8FA;
		border: none;
	}
</style>